import { truthy } from '@gnlab/utils'
import { Modal, Steps } from 'antd'
import Loading from '@/desktop/components/Loading'
import { useQywxsForChoose, type QywxForChooseExtra } from '@/desktop/logics/config-choosing-qywxs'
import services from '@/services'
import type {
  BaseSendMomentConfig,
  SendMomentConfig,
  SendMomentConfigQywx,
} from '@/services/features/send-moment'
import { getEmptySendMomentConfig } from '@/services/features/send-moment'
import ChooseQywxs from './ChooseQywxs'
import EditConfig from './EditConfig'
import EditContent from './EditContent'
import './index.module.less'

export interface EditingConfig extends BaseSendMomentConfig {
  id?: number
}

export type EditingQywx = SendMomentConfigQywx & QywxForChooseExtra

export default function EditConfigModal(props: {
  editing?: false | true | SendMomentConfig
  onFinish: () => void
}) {
  const { editing, onFinish } = props

  const title = truthy(editing)
    ? editing === true
      ? '创建朋友圈发送任务'
      : '编辑朋友圈发送任务'
    : ''

  return <Modal
    title={title}
    footer={null}
    width="800px"
    open={truthy(editing)}
    onCancel={onFinish}
    maskClosable={false}
    destroyOnClose
  >
    {truthy(editing) ? <Content editing={editing} onFinish={onFinish} /> : null}
  </Modal>
}

enum EditSteps {
  ChooseQywxs = 0,
  EditContent = 1,
  Config = 2,
}

function Content(props: { editing: true | SendMomentConfig; onFinish: () => void }) {
  const { editing, onFinish } = props

  const [step, setStep] = useState(EditSteps.ChooseQywxs)
  const [config, setConfig] = useState<EditingConfig>(() => ({
    ...(editing === true ? getEmptySendMomentConfig() : editing),
  }))
  const prevStep = useCallback(
    (editedConfig?: Partial<EditingConfig>) => {
      if (editedConfig) setConfig({ ...config, ...editedConfig })
      if (step !== EditSteps.ChooseQywxs) setStep(step - 1)
    },
    [step, config],
  )

  const qywxs = useQywxsForChoose(
    editing === true ? null : editing.id,
    async (configId?: number) => services.features.sendMoment.getQywxListForConfig(configId),
    qywx => qywx.configId,
  )

  const choosedQywxs = useCallback(
    (wxids: string[]) => {
      setConfig({
        ...config,
        wxids,
        contacts: config.contacts?.filter(item => wxids.includes(item.ownerWxid)) ?? null, // 重选企业微信后，需排除不再选中的“可见范围”客户
      })
      setStep(EditSteps.EditContent)
    },
    [config],
  )

  const contentEdited = useCallback(
    (editedConfig?: Partial<EditingConfig>) => {
      setConfig({ ...config, ...editedConfig })
      setStep(EditSteps.Config)
    },
    [config],
  )

  return <div>
    <div styleName="steps-wrap">
      <Steps current={step}>
        <Steps.Step title="选择企微账号" />
        <Steps.Step title="编辑发送内容" />
        <Steps.Step title="发送设置" />
      </Steps>
    </div>

    {!qywxs ? <Loading /> : null}
    {qywxs && step === EditSteps.ChooseQywxs ? (
      <ChooseQywxs qywxs={qywxs} wxids={config.wxids} choosed={choosedQywxs} />
    ) : null}
    {qywxs && step === EditSteps.EditContent ? (
      <EditContent config={config} goPrev={prevStep} edited={contentEdited} />
    ) : null}
    {qywxs && step === EditSteps.Config ? (
      <EditConfig config={config} goPrev={prevStep} onFinish={onFinish} />
    ) : null}
  </div>
}
